Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Responsive Images
We can add responsive images with the srcset prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-img
src="https://cdn.quasar.dev/img/image-src.png"
srcset="https://cdn.quasar.dev/img/image-1x.png 300w,
https://cdn.quasar.dev/img/image-2x.png 2x,
https://cdn.quasar.dev/img/image-3x.png 3x,
https://cdn.quasar.dev/img/image-4x.png 4x"
style="height: 280px; max-width: 300px;"
>
</q-img>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We set the srcset prop to a comma-separated list of image URLs.
Infinite Scroll
We can add an infinite scroll container with the q-infinite-scroll component.
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-infinite-scroll @load="onLoad" :offset="250">
<div v-for="(item, index) in items" :key="index" class="caption">
<p>
Lorem ipsum
</p>
</div>
<template v-slot:loading>
<div class="row justify-center q-my-md">
<q-spinner-dots color="primary" size="40px" />
</div>
</template>
</q-infinite-scroll>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
items: [{}, {}, {}, {}, {}, {}, {}]
},
methods: {
onLoad(index, done) {
setTimeout(() => {
if (this.items) {
this.items.push({}, {}, {}, {}, {}, {}, {});
done();
}
}, 2000);
}
}
});
</script>
</body>
</html>
We listen to the load event to run code to load more data when we scroll to the bottom of the container.
The offset has the distance above the bottom to trigger the loading.
We populate the loading slot to show the spinner when the items are loading.
We can change the scroll container with by setting the scroll-target prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<div
id="scroll-target-id"
class="q-pa-md"
style="max-height: 248px; overflow: auto;"
>
<q-infinite-scroll
@load="onLoad"
:offset="250"
scroll-target="#scroll-target-id"
>
<div v-for="(item, index) in items" :key="index" class="caption">
<p>
Lorem ipsum
</p>
</div>
<template v-slot:loading>
<div class="row justify-center q-my-md">
<q-spinner-dots color="primary" size="40px" />
</div>
</template>
</q-infinite-scroll>
</div>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
items: [{}, {}, {}, {}, {}, {}, {}]
},
methods: {
onLoad(index, done) {
setTimeout(() => {
if (this.items) {
this.items.push({}, {}, {}, {}, {}, {}, {});
done();
}
}, 2000);
}
}
});
</script>
</body>
</html>
We set it to the selector of the container we want to set as the scroll container.
Conclusion
We can add an infinite scroll container into our Vue app with Quasar.
